<template>
  <div>
    <van-search
      shape="round"
      v-model="word"
      @input="inputFn"
      placeholder="请输入搜索关键词"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap">
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap" v-if="searchList.length === 0">
        <!-- 每个搜索关键词 -->
        <!-- 标题 -->
        <p class="hot_title">热门搜索</p>
        <span
          class="hot_item"
          v-for="item in list"
          :key="item.first"
          @click="spanFn(item.first)"
          >{{ item.first }}</span
        >
      </div>

      <div class="hot_name_wrap" v-else>
        <p class="hot_title">搜索列表</p>
        <van-cell-group>
          <!--  <van-cell
            v-for="item in searchList"
            :key="item.id"
            :title="item.name"
            :label="item.artists[0].name"
            center
          >
            <template #right-icon>
              <van-icon name="play-circle-o" size="20" />
            </template>
          </van-cell> -->
          <SongItem
            v-for="item in searchList"
            :key="item.id"
            :title="item.name"
            :id="item.id"
            :label="item.artists[0].name"
          ></SongItem>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<script>
import { getHots, searchKey } from "@/api/search";
import SongItem from "@/components/SongItem.vue";
export default {
  components: {
    SongItem,
  },
  name: "Search",
  data() {
    return {
      word: "",
      list: [],
      searchList: [],
    };
  },
  created() {
    this.getHot();
  },
  methods: {
    async getHot() {
      const { code, result } = await getHots();
      // console.log(code,result);
      if (code === 200) {
        this.list = result.hots;
      }
    },
    //注册点击事件
    async spanFn(value) {
      console.log(value);
      this.word = value;
      if (this.word.trim() === "") {
        return (this.searchList = []);
      }
      const { code, result } = await searchKey({
        keywords: this.word,
        limit: 20,
      });
      console.log(code, result);
      if (code === 200) {
        this.searchList = result.songs;
      }
    },
    //输入框注册事件
    async inputFn() {
      if (this.word === "") {
        this.searchList = [];
        return;
      }
      const { code, result } = await searchKey({
        keywords: this.word,
        limit: 20,
      });
      if (code === 200) {
        this.searchList = result.songs;
      }
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 14px;
  color: #666;
  line-height: 40px;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 30px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 30px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 30px;
  border: 1px solid #d3d4da;
}
</style>
